<template>
	<view class="content">
		<!-- <scroll-view scroll-y="true" >
			<view></view>
		</scroll-view> -->
		<!-- <scroll-view scroll-y="true" class="loading"> -->
		<view class="loading">
			<view class="logo">

			</view>
			<view class="title">

			</view>
			<view class="xinyuanqiang">
				<scroll-view scroll-y="true" class="gundongtiao">
					<view class="beijing" :class="current==index?'active':''" v-for="(item,index) in xinyuanList"
						:key="index" @tap="xuanzhong(item,index)">
						<view class="icon-box">
							<view class="icon">

							</view>
							<text class="icon-num">{{item.zan}}</text>
						</view>
						<text>{{item.xinyuan}}</text>

					</view>
				</scroll-view>
				<text class="tishi">{{xinyuanList.length>0?'下滑查阅更多小伙伴的心愿':'暂无心愿'}}</text>
			</view>

			<view class="tijiao-btn-box">
				<view class="dianzan-btn" @tap="dianzan"></view>
				<view class="fanhui-btn" @tap="fanhui"></view>
			</view>
			<view class="guizei2">

			</view>

		</view>
		<!-- </scroll-view> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				current: -1,
				xinyuanList: [],
				id: ''
			}
		},
		onShow() {
			if (!uni.getStorageSync('openid')) {
				uni.navigateTo({
					url: '../index/index'
				})
			}
			this.getList()
		},
		methods: {
			xuanzhong(item, index) {
				console.log(item)
				this.current = index
				this.id = item._id
			},
			getList() {
				uniCloud.callFunction({
					name: 'getzxinyuan-list',
					data: {
						sign: 2
					}
				}).then(res => {
					console.log(res)
					this.xinyuanList = res.result.data
				})
			},
			dianzan() {
				if (this.current == -1) {
					uni.showToast({
						title: '请选择要点赞的心愿',
						mask: true,
						icon: 'none'
					})
				} else {
					uniCloud.callFunction({
						name: 'zanadd',
						data: {
							id: this.id,
							openid: uni.getStorageSync('openid')
						}
					}).then(res => {
						console.log(res)
						if (res.result.status == 1) {
							this.getList()
							uni.showToast({
								title: res.result.msg,
								mask: true,
								icon: 'none'
							})
						} else {
							this.getList()
							uni.showToast({
								title: res.result.msg,
								mask: true,
								icon: 'none'
							})
						}
						//点完刷新列表
						this.getList()
						this.current = -1
					})
					//提交

				}
			},
			fanhui() {
				uni.navigateTo({
					url: '../choose/choose'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url('@/static/wangge.png') repeat-y center center;
		background-size: 100% auto;
		height: 1624rpx;
		background-attachment: fixed;
		// overflow-y: scroll;
	}

	.loading {
		width: 100%;
		height: 100%;
		background: url('@/static/kuang.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// margin-top: 136rpx;
	}

	.logo {
		width: 666rpx;
		height: 46rpx;
		background: url('@/static/logo.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 60rpx;
	}

	.title {
		width: 364rpx;
		height: 106rpx;
		background: url('@/static/xinyuanqiangwenzi.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 138rpx;
	}

	.xinyuanqiang {
		width: 564rpx;
		height: 540rpx;
		margin-top: 46rpx;
		border: 1px solid #605857;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tijiao-btn-box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 44rpx;
	}

	.dianzan-btn {
		width: 220rpx;
		height: 80rpx;
		background: url('@/static/dianzan-btn.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 24rpx;
	}

	.fanhui-btn {
		width: 220rpx;
		height: 80rpx;
		background: url('@/static/fanhui-btn.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 24rpx;
	}

	.wenzi1 {
		width: 364rpx;
		height: 90rpx;
		background: url('@/static/tishi-tips.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 48rpx;
	}

	.guizei2 {
		width: 456rpx;
		height: 238rpx;
		background: url('@/static/guize2.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 48rpx;
	}

	.gundongtiao {
		width: 96%;
		height: 452rpx;
		margin-top: 34rpx;
		/* display: flex;
		flex-direction: column;
		align-items: center !important; */
	}

	.tishi {
		font-size: 16px;
		color: #000;
		line-height: 16px;
	}

	.beijing {
		width: calc(488rpx - 40rpx);
		height: 88rpx;
		background: url('@/static/tiban.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-bottom: 20rpx;
		font-size: 12px;
		color: #000;
		padding: 0 20rpx;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		align-items: center;
	}

	.beijing.active {
		// box-shadow: 0px 2px 2px rgba(0, 0, 0, .4);
		color: #ff0000;
	}

	.icon-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		margin-left: 10rpx;
	}

	.icon {
		width: 32rpx;
		height: 30rpx;
		background: url('@/static/zanicon.png') no-repeat center center;
		background-size: 100% 100%;
		// margin-top: 48rpx;
	}

	.icon-num {
		font-size: 10px;
		line-height: 10px;
	}
</style>
